<template>
  <div class="newsItems">
    <div class="demo-image" :style="{ float: floatStyle }">

      <router-link :to="`/newsDetail/${blog.id}`">
        <el-image
          style="width: 300px; height: 250px ;border-radius: 10px;"
          :src=src
          :fit="fill"></el-image>
      </router-link>

    </div>
    <div class="newsItems2" style="border: 1px solid rgba(8,0,255,0.07); width: 600px; height: 250px">

      <div class = "front">
        <router-link :to="`/newsDetail/${blog.id}`">
        <h1 style="font-size: 24px;  color: rgb(1 0 255);; font-weight: bold; margin-bottom: 10px;">{{ blog.title }}</h1>
        </router-link>
        <h5 style="font-size: 14px; margin-bottom: 5px; font-family: 微软雅黑">浏览量：{{blog.view}}</h5>
        <h5 style="font-size: 14px; margin-bottom: 5px;">日期：{{ blog.updateTime }}</h5>
        <el-tag
            v-for="(tag, index) in JSON.parse(blog.tags)"
            :key="index"
        >
          {{ tag }}
        </el-tag>
<!--        <h5 style="font-size: 14px; margin-bottom: 5px;">标签1：学习类</h5>-->
<!--        <h5 style="font-size: 14px; margin-bottom: 5px;">标签2：技术类</h5>-->
      </div>

    </div>
  </div>

</template>
<script>
export default {
  name: "NewsItems",
  props:['data','floatStyle'],
  data() {
    return {
      // tmp:[{nDate:"2022",title:"hhhhh",isMain:1},{nDate:"2022",title:"hhhhh",isMain:0},{nDate:"2022",title:"hhhhh",isMain:0}],
      //lunbotu2数据
      // List: [{nPic: ""}],
      // news: [],
      // notice: [],
      // information: []
      //图片加载地址
      src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      blogs:[],
      blog:{},

    }
  },
  //动态修改class
  computed: {
    classValue() {
      return function (i){
        return 'class-' + i
      };
    }
  },
  methods:{
      //     getAll(){
      //       this.$axios.get("/tbBlog/pagin?pageNum=1&pageSize=5&categoryId="+this.data.id).then((res)=>{
      //         this.blogs=res.data.data;
      //       });
      // console.log("blogs!!!===")
      // console.log(this.blogs)
      //   },
      getPic(){
        console.log("newItems中的data")
        console.log(this.$props.data)
        // let url=this.$axios.defaults.baseURL;
        this.src=this.$props.data.path;
        console.log("getPic")
        console.log(this.src)
        // this.$axios.get("/tbBlog/img2?="+this.data.type).then((res)=>{
        //   this.src=url+"/article/article/download/"+res.data.data.pic+"?filePath=articles&fileName="+ res.data.data.pic;
        //   // console.log("src!!!")
        //   // console.log(this.src)
        //   // console.log(res.data.data.pic)
        //   });
      }
  },
  created(){
    // this.getAll()
    this.getPic()
    this.blog = this.$props.data

  }
}
</script>
<style>
.demo-image{
}
/* .lunbotu2 {
  width: 300px;
  float: left;
  margin-left: 0px;
} */
.message{
  /*width: 290px;*/
  /*height: 210px;*/
  /* margin: 0 15px; */
  /*float: left;*/
  /*text-align: left;*/
  /* position:relative; */
}
/* .message news-item{
  float: right;
} */
.click{
  /* margin-left:290px, */
}
.newsItems2 span{
  font-size: 12px;
  color: #2171e8
}
.class-1{
  text-decoration: none;
  font-size: 15px;
  color: deepskyblue;
}
.class-0{
  text-decoration: none;color: black;font-size:12px;font-family:'黑体';
}
/*a {*/
/*  text-decoration: none;*/
/*}*/
.front {
  font-family: "Arial", sans-serif; /* 设置字体样式 */
  font-size: 18px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  font-style: italic; /* 设置斜体字体 */
  color: rgba(255, 0, 0, 0.97); /* 设置字体颜色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 设置字体阴影 */
  letter-spacing: 2px; /* 设置字体间距 */
  line-height: 1.5; /* 设置行高 */
  text-align: center; /* 设置文本对齐方式 */
  text-decoration: underline; /* 设置文本装饰 */
  overflow: hidden; /* 设置文本溢出处理 */
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
